<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>


            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="queryInfo.data.search"
                              clearable @clear="getUserList" @keyup.enter.native="getUserList">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="openDialog(1)">添加用户</el-button>
                </el-col>
            </el-row>
            <el-table :data="userLis" style="width: 100%" border stripe>
                <el-table-column type="index">
                </el-table-column>
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <!--                        {{scope.row}}-->
                        <el-switch v-model="scope.row.userStatus" @change="userStatusChange(scope.row)">

                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <!--                        修改-->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)"></el-button>
                        <!--                        删除-->
                        <el-button type="danger" icon="el-icon-delete" size="mini"
                                   @click="deleteUserById(scope.row)"></el-button>
                        <el-tooltip placement="top" content="分配角色" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--            分页区 @size-change:每页显示条数-->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="queryInfo.page" :page-sizes="[1,10,20,100]" :page-size="queryInfo.limit"
                           :total="total" layout="total,sizes,prev,pager,next,jumper">

            </el-pagination>
        </el-card>
        <el-dialog title="编辑用户信息" :visible.sync="dialogTableVisible">

            <el-form :model="user" :rules="insertRules" ref="insertRef" class="insert_user">
                <el-form-item label="ID" prop="id" style="display: none">
                    <el-input v-model="user.id"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="user.name" style="width: 175px"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address" :label-width="formLabelWidth">
                    <el-input v-model="user.address"></el-input>
                </el-form-item>
                <el-form-item label="日期" prop="date" :label-width="formLabelWidth">
                    <div class="block">
                        <el-date-picker
                                v-model="user.date"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <template slot-scope="scope">
                        <!--                        {{scope.row}}-->
                        <el-switch v-model="user.userStatus" @change="updateStatus(user.userStatus)">

                        </el-switch>
                    </template>
                </el-form-item>
                <el-form-item class="insert_btn">
                    <!--                    <el-button @click="resRef" >重置</el-button>-->
                    <el-button @click="dialogTableVisible=false">取 消</el-button>
                    <el-button type="primary" @click="insertUser(user)">确 定</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
        <el-dialog title="添加用户信息" :visible.sync="dialogTableVisible1" @close="resRef">

            <el-form :model="user1" :rules="insertRules" ref="insertRef" class="insert_user">

                <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="user1.name" style="width: 175px"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address" :label-width="formLabelWidth">
                    <el-input v-model="user1.address"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="mail" :label-width="formLabelWidth">
                    <el-input v-model="user1.mail"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone" :label-width="formLabelWidth">
                    <el-input v-model="user1.phone"></el-input>
                </el-form-item>
                <el-form-item label="日期" prop="date" :label-width="formLabelWidth">
                    <div class="block">
                        <el-date-picker
                                v-model="user1.date"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <template slot-scope="scope">
                        <!--                        {{scope.row}}-->
                        <el-switch v-model="user1.userStatus" @change="updateStatus(user1.userStatus)">

                        </el-switch>
                    </template>
                </el-form-item>
                <el-form-item class="insert_btn">
                    <el-button @click="resRef">重置</el-button>
                    <el-button @click="dialogTableVisible1=false">取 消</el-button>
                    <el-button type="primary" @click="insertUser(user1)">确 定</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            //验证
            let checkMail = (rule, value, cb) => {
                //验证邮箱的正则表达式
                const regEmail = / ^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])/
                //const regEmail=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                //正则校验
                if (regEmail.test(value)) {
                    return cb
                }
                cb(new error('邮箱不合法'))
            }
            let checkPhone = (rule, value, cb) => {
                const regPhone = /^1[0-9]{10}$/
                if (regPhone.test(value)) {
                    return cb
                }
                cb(new error('手机号不合法'))
            }
            return {
                queryInfo: {
                    data: {
                        search: ''
                    },
                    //当前页码
                    page: 1,
                    //每页显示条数
                    limit: 10,
                },
                userLis: [],
                //总条数
                total: 10,
                dialogTableVisible: false,
                dialogTableVisible1: false,
                user: {
                    id: 0,
                    name: '',
                    address: '',
                    date: '',
                    userStatus: true
                },
                user1: {
                    name: '',
                    address: '',
                    date: '',
                    userStatus: true,
                    mail: '',
                    phone: ''
                },
                formLabelWidth: '120px',
                insertRules: {
                    //验证用户名是否合法
                    name: [
                        {required: true, message: '请输姓名', trigger: 'blur'},
                        {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                    ],
                    //验证密码是否合法
                    address: [
                        {required: true, message: '请输入地址', trigger: 'blur'},
                        // {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
                    ],
                    date: [
                        {required: true, message: '请输入地址', trigger: 'blur'},
                    ],
                    mail: [
                        {required: true, message: '请输入电子邮箱', trigger: 'blur'},
                        //  自定义验证 一直失效 求解？
                        //{validator: checkMail, trigger: 'blur'},
                        {type: 'email', message: '电子邮箱不合法', trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {pattern: /^1[0-9]{10}$/, message: '手机号不合法', trigger: 'blur'},
                    ]
                },
            }
        },
        created() {
            this.getUserList();
        },
        methods: {
            async getUserList() {
                const result = await this.$http.post('getUserList', this.queryInfo)
                if (result.data.code !== 1) {
                    return this.$message.error(result.data.message)
                }
                this.userLis = result.data.data.data
                this.total = result.data.data.total
            },
            //监听pageSize  改变的事件
            handleSizeChange(newSize) {
                this.queryInfo.limit = newSize
                this.getUserList()
            },
            //监听页码值改变的事件
            handleCurrentChange(newPageNum) {
                this.queryInfo.page = newPageNum
                this.getUserList()
            },
            async userStatusChange(userInfo) {
                const result = await this.$http.post('/updateStatus', userInfo)
                if (result.data.code !== 1) {
                    this.userInfo.userStatus = !userInfo.userStatus
                    this.$message.error(result.data.message)
                }
                this.$message.success('用户状态更新成功')
            },
            updateStatus(userStatus) {
                userStatus = !userStatus
            },
            openDialog(type) {
                if (1 === type) {
                    this.dialogTableVisible1 = true
                } else {
                    this.dialogTableVisible = true
                }
            },
            async deleteUserById(user) {
                const deleteID = await this.$confirm('确定永久删除该用户？', '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err);
                //取消为cancel
                //确定为  confirm
                if ('cancel' === deleteID) {
                    return this.$message.info('已经取消删除')
                }
                const result = await this.$http.post('deleteUserById', user)
                if (result.data.code !== 1) {
                    this.$message.error(result.data.message)
                }
                this.$message.success('删除成功')
                this.getUserList()
            },
            resRef() {
                this.$refs.insertRef.resetFields()
            },
            insertUser(user) {
                this.$refs.insertRef.validate(async (valid) => {
                    //console.log(valid)
                    if (!valid) {
                        return;
                    }
                    const result = await this.$http.post('insertUser', user)
                    if (result.data.code !== 1) {
                        //this.userInfo.userStatus = !userInfo.userStatus
                        this.$message.error(result.data.message)
                    }
                    this.dialogTableVisible1 = false
                    this.dialogTableVisible = false
                    this.getUserList()

                })
            },
            async updateUserInfo(userInfo) {
                const result = await this.$http.post('/updateStatus', userInfo)
                if (result.data.code !== 1) {
                    this.$message.error(result.data.message)
                }
                this.$message.success('用户状态更新成功')
            },
            edit(user) {
                this.dialogTableVisible = true
                this.user = user
            },
            // closeDialog(){
            //     console.log("监听添加对话框的关闭事件")
            //     this.$refs.insertRef.resetFields()
            // }
            // async searchUser(searchString) {
            //     this.userInfo.data.search=searchString;
            //     const result = await this.$http.post('/searchUsers', userInfo)
            //     if (result.data.code !== 1) {
            //         this.userInfo.userStatus = !userInfo.userStatus
            //         this.$message.error(result.data.message)
            //     }
            //     this.userLis = result.data.data.data
            //     this.total = result.data.data.total
            //
            // }

        }
    }
</script>

<style lang="less" scoped>
    /*.insert_user {*/
    /*    position: absolute;*/
    /*    bottom: 0;*/
    /*    width: 100%;*/
    /*    padding: 0 20px;*/
    /*    box-sizing: border-box;*/
    /*}*/

    .insert_btn {
        display: flex;
        justify-content: flex-end;
    }
</style>